import React, { useEffect, useState } from 'react'
import { apigetExamList, apigetExamType, apiClassType } from '../api'
import { Card, Tag, Form, Select, Button } from 'antd'
import { examTypeList, classTypeList } from '../Emnu'

const {Option} = Select

const Check = () => {
    const [list, setList] = useState([])

    const [examtypeList, setExamTypeList] = useState([])

    const [classtypeList, setClassTypeList] = useState([])

    useEffect(() => {
        // 获取考试列表
        apigetExamList().then(res => {
            setList(res.data)
        })

        // 获取考试类型
        apigetExamType().then(res => {
            setExamTypeList(res.data)
        })

        // 获取课程类型
        apiClassType().then(res => {
            setClassTypeList(res.data)
        })
    }, [])

    const onFinish = (data) => {
         // 获取考试列表
         apigetExamList(data).then(res => {
            setList(res.data)
        })
    }

    return <div>
        <Card>
            <Form name="horizontal_login" layout="inline" onFinish={onFinish}>
                <Form.Item
                    label="请选择考试类型"
                    name="examType"
                >
                    <Select style={{width: "200px"}}>
                        {
                            examtypeList.length && examtypeList.map((item, idx) => {
                                return <Option key={idx} value={item.type}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="请选择课程类型"
                    name="classType"
                >
                    <Select style={{width: "200px"}}>
                    {
                            classtypeList.length && classtypeList.map((item, idx) => {
                                return <Option key={idx} value={item.type}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
        </Card>

        <Card>
            {
                list.length && list.map((item, idx) => {
                    return <div key={idx} className="list-item">
                        <h1>{item.title}</h1>
                        <Tag color="red">{classTypeList[item.classType]}</Tag>
                        <Tag color="blue">{examTypeList[item.examType]}</Tag>
                    </div>
                })
            }
        </Card>
    </div>
}

export default Check